<template>
  <div class="main">
    <p class="gray_title40">
      附件资料
      &nbsp;&nbsp;&nbsp;&nbsp;为方便您及时上传附件资料，请尽量使用微信操作
    </p>
    <div class="info_wrap">
      <ul class="info_ul">
        <li class="my-center">
          <label class="asterisk">房产证件证明:</label>
          <el-upload
            class="file-upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </li>
      </ul>

      <p class="title_line">
        <span></span>
      </p>
      <ul class="info_ul">
        <li class="my-center">
          <label class="asterisk">户口本:</label>
          <el-upload
            class="file-upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </li>
      </ul>

      <p class="title_line">
        <span></span>
      </p>
      <ul class="info_ul">
        <li class="my-center">
          <label class="asterisk">父母身份证:</label>
          <el-upload
            class="file-upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Attachment",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style scoped>
.main_content {
  width: 1000px !important;
  margin-top: 80px !important;
  margin-bottom: 60px;
}

.file-upload {
  display: inline-block;
  width: 50px;
}

.file-upload /deep/ .el-upload--picture-card,
.file-upload /deep/ .el-upload-list--picture-card .el-upload-list__item {
  line-height: 100px;
  font-size: 12px;
  height: 100px;
  width: 100px;
  position: relative;
  background: #f8f8f8;
  border: 1px solid #d2d2d2;
  border-radius: 0;
}

.asterisk::after {
  content: "*";
  color: red;
  padding-left: 10px;
  font-size: 15px;
}

em {
  width: 30px;
  padding-left: 5px;
  padding-right: 10px;
}
.min {
  width: 90px;
  height: 30px;
  margin-right: 13px;
}
.middle {
  width: 200px;
  height: 30px;
}

.my-center {
  height: 100px;
  line-height: 100px;
}
</style>